<template>
    <div class="top-bar">
        <ul>
            <router-link tag="li" v-for="l in list" :to="l.uri" >           
                {{l.name}}
                <div class="bottom"></div>  
            </router-link>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    name: "All",
                    uri: "/home/All"
                }, {
                    name: "精华",
                    uri: "/home/Essence"
                }, {
                    name: "分享",
                    uri: "/home/Share"
                }, {
                    name: "问答",
                    uri: "/home/Qaa"
                }, {
                    name: "招聘",
                    uri: "/home/Recruit"
                }]
            }
        }
    }
</script>
<style scoped>
    .top-bar {
        width: 100%;
        height: 44px;
        background: white;
        font-size: 16px;
        line-height: 44px;
        position: fixed;
        top: 0;
        border-bottom: 1px solid #333;
        z-index: 100;
    }
    
    ul {
        display: flex;
        justify-content: flex-start;
        text-align: center;
    }
    
    ul li {
        width: 20%;
        color: #ccc;
        position: relative;
    }
    
    .bottom {
        width: 100%;
        background: indigo;
        height: 2px;
        position: absolute;
        top: 40px;
        display: none;
    }
    
    .is-active {
        color: indigo;
    }
</style>